<template>
    <select class="custom-select" :value="props.modelValue" @change="handleChange">
        <!-- <option value="">请选择</option> -->
        <option 
            v-for="(item, index) in options" 
            :key="index" 
            :value="item[valueField]">
            {{ item[labelField] }}
        </option>
    </select>
</template>
<script setup>
const props = defineProps({
    modelValue: {  // 新增modelValue
        type: [String, Number],
        default: ''
    },
    options: {
        type: Array,
        default: () => []
    },
    // 新增字段映射配置
    labelField: {
        type: String,
        default: 'label'
    },
    valueField: {
        type: String,
        default: 'value'
    }
});

const emit = defineEmits(['change']);

const handleChange = (event) => {
    const selectedValue = event.target.value;
    const selectedOption = props.options.find(
        option => option[props.valueField] == selectedValue // 使用宽松相等匹配类型差异
    );
    emit('change', selectedOption);
};
</script>
<style scoped lang="scss">
.custom-select {
    width: 100%;
    height: 100%;
    padding: 0 12px;
    background: transparent;
    border: 1px solid #4A99FF;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    appearance: none;
    position: relative;
    background: url("/src/assets/icon/下拉.png") no-repeat right 12px center;
    background-size: 12px;

    &:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(74, 153, 255, 0.2);
    }

    &::-ms-expand {
        display: none;
    }

    option {
        background: #4A99FF;  // 下拉选项背景色
        color: #fff;         // 选项文字颜色
    }
    
    &::-webkit-scrollbar {
        width: 6px;
        background-color: rgba(74, 153, 255, 0.3);
    }
    
    &::-webkit-scrollbar-thumb {
        background: #8ebaf4;
        border-radius: 3px;
    }
}
</style>